<template>
  <div class="nav-header">
    <div class="left_nav">
      <el-icon class="fold-menu" v-if="!isFold" @click="handleFoldClick">
        <fold />
      </el-icon>
      <el-icon class="fold-menu" v-else @click="handleFoldClick">
        <expand />
      </el-icon>
      <!-- 传参数过去 -->
      <HyBreadcrumb :breadcrumbs="breadcrumbs"></HyBreadcrumb>
    </div>
    <div class="demo">
      深色模式
      <el-switch inline-prompt v-model="theme" @click="toggle()"> </el-switch>
    </div>
    <div class="content">
      <div><userinfo /></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, computed } from "vue";
import userinfo from "./userinfo.vue";
import HyBreadcrumb from "@/base-ui/breadcrumb";
import { IBreadcrumb } from "@/base-ui/breadcrumb";
// 拿到路由
// useRoute 可以拿到当前路由
import { useRouter, useRoute } from "vue-router";
import { useToggle } from "@vueuse/shared";
import { useDark } from "@vueuse/core";
// 当前路由的匹配记录
export default defineComponent({
  components: {
    userinfo,
    HyBreadcrumb
  },
  emits: ["foldchange"],
  setup(props, { emit }) {
    const isFold = ref(false);
    // router
    const router = useRouter();
    const route = useRoute();
    // 拿到当前路径
    const currentPath = route.path;
    // onMounted(() => {
    //   // 当前路由的匹配记录
    //   console.log(router.currentRoute.value.matched);
    //   const routers = computed(() => {
    //     // 过滤掉没有meta的
    //     return router.currentRoute.value.matched.filter(
    //       (item) => item.meta.title
    //     );
    // })
    // });
    const handleFoldClick = () => {
      isFold.value = !isFold.value;
      emit("foldchange", isFold.value);
    };
    // 面包屑的数据 [{name: '',path:''}]
    const breadcrumbs: IBreadcrumb[] = [{ name: "123", path: "123" }];
    const theme = ref<boolean>(false);

    const isDark = useDark({
      // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
      storageKey: "useDarkKEY",
      // 暗黑class名字
      valueDark: "dark",
      // 高亮class名字
      valueLight: "light"
    });

    const toggle = useToggle(isDark);

    return {
      isFold,
      handleFoldClick,
      breadcrumbs,
      theme,
      toggle
    };
  }
});
</script>
<style scoped lang="less">
.nav-header {
  display: flex;
  justify-content: space-between;
  .left_nav {
    display: flex;
    justify-content: space-between;
    .fold-menu {
      font-size: 30px;
      cursor: pointer;
    }
  }

  .content {
    display: flex;
  }
}
</style>
